<template>
  <div style="padding: 0 20px;background: #fff;">
    <el-tabs v-model="tabName" @tab-click="handleClickTab" v-if="isShowLcLog">
      <el-tab-pane label="流程跟踪" name="lcgz">

      </el-tab-pane>
      <el-tab-pane label="流程日志" name="lcrz">
        <HCView ref="lcrz" :viewConfig="viewConfig"></HCView>
      </el-tab-pane>
      <el-tab-pane label="催办日志" name="cbrz">
        <HCView ref="cbrz" :viewConfig="viewConfig"></HCView>
      </el-tab-pane>
    </el-tabs>
    <div v-show="tabName == 'lcgz'">
      <!-- 状态搜索 -->
      <div class="query-list" v-if="isShowQuery">
        <div class="query-item" v-for="(item, index) in queryList" :class="{ active: nowQueryInde == index }"
          @click="handleChangeQuery(item, index)" :key="index">
          <div class="query-num hc-min-title" :style="{ color: item.color }">{{ item.num }}</div>
          <div class="query-lable hc-min-text">{{ item.label }}</div>
        </div>
      </div>
      <div class="btn-list" v-if="isShowQuery || isShowCbBtn">
        <el-button type="primary" v-if="isShowCbBtn" @click="handleCb()">催办</el-button>
        <el-button type="primary" v-if="isShowQuery" @click="handleExportBwgl()">导出</el-button>
      </div>
      <el-table ref="hcTable" :data="showData" :border="viewConfig.bordered"
        :header-cell-style="{ background: viewConfig.theadColor }" style="width: 100%"
        :row-key="(row) => row.unid || 0 + '_' + row.xh" stripe>
        <el-table-column label="状态" width="50" align="center">
          <template slot-scope="scope">
            <el-tooltip v-if="!isShowStateText" popper-class="hc-dec-text" class="item" effect="light"
              :content="getObjKey(scope.row.state, DICT_bw_state, 'label')" placement="top">
              <svg-icon :icon-class="getObjKey(scope.row.state, DICT_bw_state, 'icon')"
                style="font-size:18px;color:green" />
            </el-tooltip>
            <span v-if="isShowStateText">{{ getObjKey(scope.row.state, DICT_bw_state, 'label') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="columnsItem.title" :width="columnsItem.width" v-for="(columnsItem, index) in columns"
          :key="index" :align="columnsItem.align" :fixed="columnsItem.key == 'action' ? 'right' : false">
          <template slot="header" slot-scope="scope">
            <span v-html="scope.column.label"></span>
          </template>
          <template slot-scope="scope">
            <HCViewItem :text="scope.row[columnsItem.key]" :record="scope.row" :otherObj="{}" :columnsItem="columnsItem"
              :buttonsList="[]"></HCViewItem>
          </template>
        </el-table-column>
        <el-table-column label="催办" width="100" v-if="isShowCbBtn">
          <template slot-scope="scope">
            <el-checkbox class="cb" v-model="scope.row.checked" border
              v-if="scope.row.state == 4 || scope.row.state == 0 || scope.row.state == 1 || scope.row.state == 2">催办</el-checkbox>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <div class="hc-view-page">
        <pagination v-show="totalCount > 0" :total="totalCount" :page.sync="currentpage" :limit.sync="pageSize" />
      </div>
    </div>

    <!-- 催办录入单 -->
    <el-dialog title="催办录入单" :visible.sync="dialogFormVisible" append-to-body :close-on-click-modal="false">
      <div class="hc-form-template color-gray">
        <div class="hc-row">
          <div class="hc-col flex-1">
            <div class="form-label">催办内容</div>
          </div>
          <div class="hc-col flex-3">
            <el-input v-model="form.nr" type="textarea" :rows="2"></el-input>
          </div>
        </div>
        <div class="hc-row">
          <div class="hc-col flex-1">
            <div class="form-label">接收人</div>
          </div>
          <div class="hc-col flex-3" style="justify-content: flex-start;">
            <div style="padding-left:5px"> {{ form.jsryCommonname }}</div>
          </div>
        </div>
        <div class="hc-row">
          <div class="hc-col flex-1">
            <div class="form-label">提醒方式</div>
          </div>
          <div class="hc-col flex-3" style="justify-content: flex-start;">
            <div style="padding-left:5px"> <el-checkbox-group v-model="form.tsfs">
                <el-checkbox :label="1">手机短信</el-checkbox>
                <el-checkbox :label="0">网络信息</el-checkbox>
              </el-checkbox-group></div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSend">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getList, exportBwgl } from "../api/common/bwgzApi";
import { mapState } from "vuex";
import { viewConfig } from "@/utils/coreConfig";
import { getFlowTitle } from "../api/commonApi";
// 分页组件
import Pagination from "@/components/Pagination";
import { getObjKey } from "../utils/index"
import { download } from "../utils/index";
import request from '@/utils/request';
import HCView from "../HCView";
export default {
  name: "FollowOffice",
  components: {
    Pagination,
    HCView,
    //解决嵌套引入的问题
    HCViewItem: () => import("../HCView/components/HCViewItem.vue"),
  },
  props: ["unid", "modulename", "formtype", "cbPath"],
  computed: {
    ...mapState("dict", ["DICT_bw_state"]),
    showData()
    {
      let valueToReturn = [];
      this.tableData.forEach(pre_lcgz =>
      {
        if (this.nowShowState.length == 0)
        {
          valueToReturn.push(pre_lcgz);
        }
        else if (this.nowShowState.indexOf(pre_lcgz.state) > -1)
        {
          valueToReturn.push(pre_lcgz);
        }
      });
      this.totalCount = valueToReturn.length;
      return valueToReturn.slice((this.currentpage - 1) * this.pageSize, this.currentpage * this.pageSize);
    },
    queryList()
    {
      let queryList = [{
        label: "全部",
        showState: [],
        num: this.tableData.length
      },
      {
        label: "已办",
        showState: [1024, 2048, 8],
        num: 0,
        color: "#67C23A"
      },
      {
        label: "待办",
        showState: [1, 2, 4, 4096, 8192],
        num: 0,
        color: "#333"
      },
      {
        label: "待办未读",
        showState: [1, 4096],
        num: 0,
        color: "#ed2825"
      },
      {
        label: "待办已读",
        showState: [2, 4, 8192],
        num: 0,
        color: "#E6A23C"
      }]
      this.tableData.forEach(pre_lcgz =>
      {
        let state = pre_lcgz.state;
        queryList.forEach(pre_query =>
        {
          if (pre_query.showState.indexOf(state) > -1)
          {
            pre_query.num++;
          }
        })
      })
      return queryList;
    }
  },
  data()
  {
    return {
      //催办录入但
      form: {
        nr: "",
        jsryCommonname: null,
        jsry: null,
        tsfs: null,
      },
      //催办录入单是否显示
      dialogFormVisible: false,
      // 是否显示催办功能
      isShowCbBtn: window.HC_config.VUE_APP_SHOW_CBBTN || false,
      //是否显示流程日志
      isShowLcLog: window.HC_config.VUE_APP_SHOW_LCLOG || false,
      //是否合并流程跟踪
      isCombineLcgz: window.HC_config.VUE_APP_HBLCGZ || false,
      //是否加载流程日志
      lcrzLoad: false,
      //是否加载催办日志
      cbrzLoad: false,
      //当前tab项
      tabName: "lcgz",
      //是否显示图标
      isShowStateText: window.HC_config.VUE_APP_SHOW_STATETEXT || false,
      //是否显示分类搜索
      isShowQuery: window.HC_config.VUE_APP_SHOW_BWGZQUERY || false,
      viewConfig,
      columns: [
        {
          title: "办理人",
          dataIndex: "ownerName",
          key: "ownerName",
          type: "TEXT",
          width: 120
        },
        {
          title: "所在部门",
          dataIndex: "ownerOrgFullname",
          key: "ownerOrgFullname",
          type: "TEXT"
        },
        {
          title: "操作",
          dataIndex: "flowStructureNodeIdent",
          key: "flowStructureNodeIdent",
          type: "TEXT",
          width: 120
        },
        {
          title: "送文时间",
          dataIndex: "receiveTime",
          key: "receiveTime",
          type: "TEXT",
          width: 170
        },
        {
          title: "送文人",
          dataIndex: "senderName",
          key: "senderName",
          type: "TEXT",
          width: 110
        },
        {
          title: "办理时间",
          dataIndex: "finishTime",
          key: "finishTime",
          type: "TEXT",
          width: 170
        },
        {
          title: "备注",
          dataIndex: "remark",
          key: "remark",
          type: "TEXT",
          width: 100
        }
      ],
      nowShowState: [],//当前显示的流程状态。空就是全部显示
      nowQueryInde: 0,
      //总数
      totalCount: 0,
      //当前页码
      currentpage: 1,
      //每页数量
      pageSize: 10,
      tableData: [],
      queryParam: {
      }
    };
  },
  methods: {
    getObjKey,
    //获取办文数据
    getTableData(data)
    {
      this.queryParam.pageSize = 1000;
      this.queryParam.pageNo = 1;
      if (!this.queryParam.wjId)
      {
        this.queryParam.wjId = (data && data.wjId) || this.unid || this.$route.query.unid;
        this.unid = this.queryParam.wjId;
      }
      if (!this.queryParam.modulename)
      {
        this.queryParam.modulename = (data && data.methodName) || this.modulename || this.$route.query.modulename;
      }

      getList(this.queryParam).then(res =>
      {
        // this.columns[0].viewProp.defaultValue = JSON.stringify(this.DICT_bw_state)



        this.tableData = res.result.data || [];
        if (this.isCombineLcgz)
        {
          //合并相同状态的 相同节点 相同所属人的
          let tempMap = {};
          this.tableData.forEach(pre_item =>
          {
            let key = pre_item.state + "_" + pre_item.ownerIdent + "_" + pre_item.flowStructureNodeIdent;
            if (tempMap[key])
            {
              tempMap[key].senderName += ("," + pre_item.senderName);
            }
            else
            {
              tempMap[key] = pre_item;
            }
          })
          //将map转为数组
          this.tableData = [];
          for (let key in tempMap)
          {
            this.tableData.push(tempMap[key]);
          }
        }
        this.totalCount = res.result.totalCount || 0;
        console.log(this.columns);
        console.log(this.DICT_bw_state);
      })
    },
    //修改查询条件
    handleChangeQuery(P_Query, P_Index)
    {
      this.nowQueryInde = P_Index;
      this.nowShowState = P_Query.showState;
      this.currentpage = 1;
    },
    //导出办文跟踪
    handleExportBwgl()
    {
      exportBwgl(this.queryParam).then(res =>
      {
        if (res instanceof Blob)
        {
          download(res, "办文跟踪.xlsx");
        }
        else if (res.data instanceof Blob)
        {
          download(res.data, "办文跟踪.xlsx");
        }
      })
    },
    handleClickTab()
    {
      if (this.tabName == 'lcrz')
      {
        this.$nextTick(() =>
        {
          if (this.lcrzLoad == false)
          {
            this.lcrzLoad == true;
            this.$refs.lcrz.getViewData(
              false,
              "100",
              "xtsz",
              "lcLog",
              { flowIdent: this.queryParam.wjId }
            );
          }
        })

      }
      else if (this.tabName == 'cbrz')
      {
        this.$nextTick(() =>
        {
          if (this.cbrzLoad == false)
          {
            this.cbrzLoad = true;
            this.$refs.cbrz.getViewData(
              false,
              "100",
              "xtsz",
              "cbLog",
              { flowIdent: this.queryParam.wjId }
            );
          }
        })
      }
    },
    //监听列表勾选
    handleSelectionChange(selection)
    {
      this.records = selection;
    },
    //催办
    handleCb()
    {
      let choseDataList = [];
      this.showData.forEach(pre_item =>
      {
        if (pre_item.checked)
        {
          choseDataList.push(pre_item);
        }
      })

      if (choseDataList.length > 0)
      {
        let jsry = [];
        let jsryName = [];
        choseDataList.forEach(pre_lcgz =>
        {
          jsry.push(pre_lcgz.ownerIdent);
          jsryName.push(pre_lcgz.ownerName);
        })

        getFlowTitle({
          unid: this.queryParam.wjId,
          modulename: this.queryParam.modulename
        }).then(res =>
        {
          this.flowTitle = res.result.flowTitle || null;

          this.form = {
            nr: (this.flowTitle || "") + ",请尽快办理",
            jsry: jsry.join(","),
            jsryCommonname: jsryName.join(","),
            tsfs: [1, 0]
          }
          this.dialogFormVisible = true;
        })
      }
      else
      {
        this.$message.warning("请选择要催办的人员");
      }
    },
    handleSend()
    {
      if (this.form.nr == "")
      {
        this.$message.error("催办内容不能为空");
        return
      }
      //消息模式
      let awakeMode = 0;
      if (this.form.tsfs.length == 2)
      {
        awakeMode = 65535
      } else
      {
        if (this.form.tsfs.indexOf(1) > -1)
        {
          awakeMode = 2
        }
        if (this.form.tsfs.indexOf(0) > -1)
        {
          awakeMode = 1
        }
      }
      request({
        url: "/network/lggzcb",
        method: 'post',
        data: {
          bt: this.form.nr,
          formUnid: this.unid,
          path: (this.cbPath || this.$route.path) + "?moduleName=" + this.modulename + "&formType=" + this.formtype,
          jsrunids: this.form.jsry,
          awakeMode: awakeMode,
          tsfs: this.form.tsfs.join(",")
        },
      }).then(res =>
      {
        this.$message.success("发送成功！");
        this.dialogFormVisible = false;
      })
    }
  },

};
</script>

<style lang="scss" scoped>
.query-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;

  .query-item {
    flex: 1;
    margin: 0 30px;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    padding: 10px 40px;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.active {
      background: #409eff;

      .query-lable {
        color: #fff !important;
      }

      .query-num {
        color: #fff !important;
      }
    }

    .query-lable {
      margin-top: 10px;
    }
  }
}

.btn-list {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}

.cb.el-checkbox.is-bordered {
  border-color: #1890ff;
}
</style>